import {useTranslation} from 'react-i18next';
import {useState, useEffect} from 'react';
import classNames from 'classnames';
import Navigation from '@/components/Navigation'; 
import Footer from '@/components/Footer';
import styles from './index.module.scss';
import image3 from './assets/image_3.png';
import image4 from './assets/image_4.png';
import image5 from './assets/image_5.png';
import image6 from './assets/image_6.png';
import image7 from './assets/image_7.png';
import image8 from './assets/image_8.png';
import image9 from './assets/image_9.png';
import image10 from './assets/image_10.png';
import image11 from './assets/image_11.png';

export default function GeneratedComponent() {
  const {t} = useTranslation();
  const [activeKey, setActiveKey] = useState('key1');
  useEffect(
    () => {
      window.scrollTo(0, 0)
    },
    []
  );
  return (
    <div style={{paddingTop: 47}}>
      <Navigation />
      <div className={styles.page}>
        <div className={styles.wrap}>
          <div className={styles.container}>
            <div className={styles.content}>
              <div className={styles.main}>
                <div className={styles.section}>
                  <div className={styles.subSection}>
                    <div className={styles.text}>{t('光谱平权行动')}</div>
                    <div className={styles.text1}>
                      {t('始于《色彩感知平权宣言》的签署，我们已在全球12所顶尖学府启动变革引擎。每个校园行动节点，都在编织包容性视觉生态网络——无论差异源于基因编码还是生命轨迹的偶然偏移。')}
                    </div>
                  </div>
                </div>
                <div className={styles.section1}>
                  <div className={styles.subSection1}>
                    <div className={styles.block}>
                      <div className={styles.subBlock}>
                        <div
                          className={classNames(styles.div, activeKey === 'key1' && styles.active)}
                          onClick={() => setActiveKey('key1')}
                        >
                          <div className={styles.div1}>
                            <div className={styles.div2}>
                              <div className={styles.text2}>
                                <span className={styles.text2__seg0}>
                                  {t('创始者之声')}
                                </span>
                              </div>
                              <div className={styles.text2_des}>{t('Our Mission')}</div>
                            </div>
                          </div>
                        </div>
                        <div
                          className={classNames(styles.div, activeKey === 'key2' && styles.active)}
                          onClick={() => setActiveKey('key2')}
                        >
                          <div className={styles.div1}>
                            <div className={styles.div2}>
                              <div className={styles.text2}>
                                <span className={styles.text2__seg0}>
                                  {t('行动图谱')}
                                </span>
                              </div>
                              <div className={styles.text2_des}>{t('Our Map')}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    {activeKey === 'key1' && (
                      <div className={styles.text4}>
                        <span className={styles.text4__seg0}>
                          {t('当3亿人的视界被数据折叠，我们以科学解码基因密码，用包容重构光谱秩序。每一帧非常规色彩认知，都是人类视觉进化的可能态。今日启动高校基因图谱计划：麻省理工 Media Lab 专场、NYU 光谱认知工作坊、Columbia 色觉 VR 档案馆——让每一场‘视觉异常’成为革新社会认知的切口。未来十年，我们将以技术为针、教育为线，缝合被误解撕裂的色谱宇宙。')}
                        </span>
                      </div>
                    )}
                    {activeKey === 'key2' && (
                      <div className={styles.text4}>
                        <div className={styles.text4__seg0} style={{marginBottom: 30}}>
                          {t('见证12所高校发起的认知平权运动')}
                        </div>
                        <ul className={styles.text4_ul}>
                          <li>{t('NYU 生物艺术展《我的色觉基因》')}</li>
                          <li>{t('USC「错位视界」VR体验工坊')}</li>
                          <li>{t('Columbia 色觉科普基因检测车')}</li>
                        </ul>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
            <img src={image3} className={styles.image} />
          </div>
        </div>
        <div className={styles.wrap1}>
          <div className={styles.content1}>
            <div className={styles.main1}>
              <div className={styles.section2}>
                <div className={styles.text5}>{t('「从宣言到行动」')}</div>
                <div className={styles.subSection2}>
                  <div className={styles.block1}>
                    <img
                      src={image4}
                      className={styles.image3}
                    />
                    <div className={styles.subBlock1}>
                      <div className={styles.div6}>
                        <img
                          src={image5}
                          className={styles.image4}
                        />
                        <div className={styles.text6}>
                          <span className={styles.text6__seg0}>
                            {t('麻省理工 Media Lab 专场')}
                          </span>
                        </div>
                        <div className={styles.div7}>
                          <div className={styles.text7}>
                            <span className={styles.text7__seg0}>
                              {t('MIT Media Lab联合色觉差异者开发AR色觉矫正系统，通过神经可塑性训练重塑视觉感知，已帮助127名色弱学生提升辨色能力。')}
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className={styles.main2}>
              <div className={styles.section3}>
                <div className={styles.subSection3}>
                  <div className={styles.block2}>
                    <div className={styles.subBlock2}>
                      <img
                        src={image6}
                        className={styles.image5}
                      />
                      <div className={styles.text8}>
                        <span className={styles.text8__seg0}>
                          {t('NYU 光谱认知工作坊')}
                        </span>
                      </div>
                      <div className={styles.div8}>
                        <div className={styles.text9}>
                          <span className={styles.text9__seg0}>
                            {t('发起全球首个色觉基因编辑伦理研讨会，探索CRISPR技术在色盲治疗中的边界与可能。')}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <img
                    src={image7}
                    className={styles.image6}
                  />
                </div>
              </div>
            </div>
            <div className={styles.main3}>
              <div className={styles.section4}>
                <div className={styles.subSection4}>
                  <img
                    src={image8}
                    className={styles.image7}
                  />
                  <div className={styles.block3}>
                    <div className={styles.subBlock3}>
                      <img
                        src={image9}
                        className={styles.image8}
                      />
                      <div className={styles.text10}>
                        <span className={styles.text10__seg0}>
                          {t('Columbia 色觉档案馆')}
                        </span>
                      </div>
                      <div className={styles.div9}>
                        <div className={styles.text11}>
                          <span className={styles.text11__seg0}>
                            {t('收录200+色盲艺术家作品，重构公众对“正常视觉”的定义。')}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className={styles.main4}>
              <div className={styles.section5}>
                <div className={styles.subSection5}>
                  <div className={styles.block4}>
                    <div className={styles.subBlock4}>
                      <img
                        src={image10}
                        className={styles.image9}
                      />
                      <div className={styles.text12}>
                        <span className={styles.text12__seg0}>
                          {t('CalTech 量子色觉计划')}
                        </span>
                      </div>
                      <div className={styles.div10}>
                        <div className={styles.text13}>
                          <span className={styles.text13__seg0}>
                            {t('物理系开发量子点光谱模拟器，首次实现色盲者与常规视觉者的实时色彩感知同步，突破认知壁垒。')}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <img
                    src={image11}
                    className={styles.image10}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}
